<template>
    <div>
        <h1>会员信息列表</h1>
        <a href="/">会员添加</a>
        <table class="table">
           <thead>
            <tr>
                <td>会员名称</td>
                <td>密码</td>
                <td>年龄</td>
                <td>性别</td>
                <td>地址</td>
                <td>手机号</td>
                <td>头像</td>
                <td>操作</td>
            </tr>
           </thead>
           <tbody>
            <tr v-for="a in data">
                <td>{{a.name  }}</td>
                <td>****</td>
                <td>{{ a.age }}</td>
                <td>{{a.sex?"男":"女"  }}</td>
                <td>{{a.addr  }}</td>
                <td>{{a.phone  }}</td>
                <td><img :src="'https://localhost:7144'+a.img" style="height: 100px;width: 100px;"></td>
                <td>  <input type="button" value="删除" @click="DelUser(a.id)">
                    <input type="button" value="编辑" @click="UptUser(a.id)"></td>
            </tr>
           </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from "vue"
import axios from "axios";
import { useRouter } from "vue-router";
const router=useRouter()
const data=ref([{
    "id": 0,
  "name": "",
  "age": 0,
  "pos": "",
  "sex": 0,
  "addr": "",
  "phone": "",
  "img": ""
}])
const UptUser=(val:number)=>{
   router.push({path:'/UptView',query:{id:val}})
}
const DelUser=(id:any)=>{
    axios.delete("https://localhost:7144/api/User/DelUser",{params:{id:id}}).then(res=>{
        if(res.data>0){
            alert('删除成功');
            Show();
        }
        else{
            alert('删除失败');
        }
    })

}
onMounted(()=>{
    Show();
})
const Show=()=>{
    axios.get("https://localhost:7144/api/User/GetUser").then(res=>{
        data.value=res.data
    })
}
</script>

<style scoped>

</style>